﻿@{
    ViewBag.Title = "MemLoanView";
    Layout = "~/Views/Shared/MyAccount.cshtml";
}
<link href="~/Content/BootstrapSouce/css/bootstrap.min.css" rel="stylesheet" />
<script src="~/Content/BootstrapSouce/js/jquery.js"></script>
<script src="~/Content/BootstrapSouce/js/bootstrap.min.js"></script>
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
@using BI.CF.Model;
@{
    UserrsModel Umodel = Session["Umodel"] as UserrsModel;
}
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<link href="~/Scripts/webuploader.css" rel="stylesheet" />
<link href="~/CES/bootstrap-theme.min.css" rel="stylesheet" />
<script src="~/Scripts/webuploader.js"></script>
<style>
    .upload-state-done:after {
        content: "\✔";
        font-family: FontAwesome;
        font-style: normal;
        font-weight: normal;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        font-size: 32px;
        position: absolute;
        bottom: 0;
        right: 4px;
        color: #4cae4c;
        z-index: 99;
    }
</style>
<script>
    $(document).ready(function () {
        $.ajax({
            type: "POST",
            url: "/MemLoan/UserrsSelect",
            dataType: "json",
            success: function (mes) {
                if (mes == 0) {
                    alert("请登录");
                    location.href = '/MyAccount/View_UserLogin'
                }
                else {
                    if (mes.UserMemlevelId > 0) {
                        $("#name").append(mes.UserName)
                    }
                    else {
                        alert('非VIP会员或已失效，不能进行自动投标设置、借款等业务，请先前往申请VIP页面操作。');
                        location.href = '#';
                    }
                };

            }
        });
    })
    function yan1() {
        var Money = $("#Monwy").val();

        if (Money>100000) {
            $("#yan1").html("")
            $("#yan1").html("超出最大借款范围")
        }
        else {
            $("#yan1").html("")
        }
    }
    function yan2() {
        var Money = $("#day").val();

        if (Money > 20) {
            $("#yan2").html("")
            $("#yan2").html("超出最大筹集期")
        }
        else {
            $("#yan2").html("")
        }
    }
    function yan3() {
        var Money = $("#li").val();

        if (Money > 15 || Money<1) {
            $("#yan3").html("")
            $("#yan3").html("利率范围1%～15%")
        }
        else {
            $("#yan3").html("")
        }
    }
    function yan4() {
        var Money = $("#qi").val();

        if (Money > 24 || Money < 1) {
            $("#yan4").html("")
            $("#yan4").html("借款期限在1～24（月）")
        }
        else {
            $("#yan4").html("")
        }
    }
</script>
    <div id="uploader" class="wu-example">
        <div class="container" style="width:900px; height:660px;">
           
            <table class="table table-striped" style="width:800px; margin-left:45px;">
                <tr>
                    <td style="width:30%;">借款金额：</td>
                    <td style="width:50%; padding-left:70px;"><input id="Monwy" type="number" name="LoanMoney" max="100000" min="50" style="width:175px;" onblur="yan1()" />元</td>
                    <td style="width:20%;"><span id="yan1" style="color:#ff0000"></span></td>
                </tr>
                <tr>
                    <td style="width:30%;">借款用途：</td>
                    <td style="width:50%;  padding-left:70px;"><input id="LoanPurpose" type="text" name="LoanPurpose" /></td>
                    
                    <td style="width:20%;"><input type="hidden" id="UserID" name="UserID" value="@Umodel.UserId" /></td>
                </tr>
                <tr>
                    <td style="width:30%;">借款筹集期:</td>
                    <td style="width:50%;  padding-left:70px;"><input id="LoanRaise" type="number" name="LoanRaise" max="20" min="1" style="width:175px;" onblur="yan2()" />天</td>
                    <td style="width:20%;"><span id="yan2" style="color:#ff0000"></span></td>
                </tr>
                <tr>
                    <td style="width:30%;">年利率：</td>
                    <td style="width:50%;  padding-left:70px;"><input id="Annualrate" type="number" name="Annualrate" min="1" max="15" style="width:175px;" onblur="yan3()" />%/年</td>
                    <td style="width:20%;"><span id="yan3" style="color:#ff0000"></span></td>
                </tr>
                <tr>
                    <td style="width:30%;">还款方式：</td>
                    <td style="width:50%;  padding-left:70px;">
                        <select id="RepaymentModeId" style="width:175px;" name="RepaymentModeId">
                            <option><-请选择-></option>
                            <option value="按月分期">按月分期</option>
                            <option value="按月到期">按月到期</option>
                            <option value="按天到期">按天到期</option>
                        </select>
                    </td>
                    <td style="width:20%;"></td>
                </tr>
                <tr>
                    <td style="width:30%;">借款期限：</td>
                    <td style="width:50%;  padding-left:70px;"><input id="LoanTerm" type="number" name="LoanTerm" max="24" min="1" style="width:175px;" onblur="yan4()" />月</td>
                    <td style="width:20%;"><span id="yan4" style="color:#ff0000"></span></td>
                </tr>
                <tr>
                    <td style="width:30%;">借款标题：</td>
                    <td style="width:50%;  padding-left:70px;"><input id="Title" type="text" name="Title" /></td>
                    <td style="width:20%;"></td>
                </tr>
                <tr>
                    <td style="width:30%;">借款说明：</td>
                    <td style="width:50%;  padding-left:70px;"><textarea id="LoanExplain" name="LoanExplain" rows="2" cols="18" style="width:175px;height:50px"></textarea></td>
                    <td style="width:20%;"></td>
                </tr>
                <tr>
                    <td style="width:30%;">借款类型：</td>
                    <td style="width:50%;  padding-left:70px;">抵押贷<input type="hidden" name="LoanType" value="抵押贷" id="LoanType" /></td>
                    <td style="width:20%;"></td>
                </tr>
                <tr style="height:30%">
                    <td>
                        文件：
                    </td>
                    <td colspan="3" style="width:50%;  padding-left:70px;">
                        <div class="cp_img_jia" id="epicker">选择文件</div>
                    </td>
                </tr>
               <tr>
                   <th colspan="3">
                       <label>
                           温馨提示：<br />
                           借款最大期限为24个月，年利率最小为1%/年,借款金额最高为10万
                       </label><br /><br />
                   </th>
               </tr>
            <tr>
                <th colspan="3">
                    @*<input id="Submit1" type="submit" value="发布" class="btn-primary" style="width:100px;height:35px; border-radius:5px;" />*@
                    <button id="ctlBtn" class="cp_img_jia">开始上传</button>
                </th>
            </tr>
            </table><br />
            <table>
                <tr>
                    <th>
                        <div id="thelist" class="uploader-list"></div>
                    </th>
                </tr>
            </table>
        </div>
    </div>



<script>

    // 图片上传demo
    jQuery(function () {
        var $ = jQuery,
            $list = $('#thelist'),
            // 优化retina, 在retina下这个值是2
            ratio = window.devicePixelRatio || 1,

            // 缩略图大小
            thumbnailWidth = 100 * ratio,
            thumbnailHeight = 100 * ratio,

            // Web Uploader实例
            uploader;

        // 初始化Web Uploader
        uploader = WebUploader.create({

            // 自动上传。
            auto: false,

            // swf文件路径
            //swf: applicationPath + '/Script/Uploader.swf',

            // 文件接收服务端。
            server: '/Record/UpLoadProcess',

            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: '#epicker',

            // 只允许选择文件，可选。
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/jpg,image/jpeg,image/png'
            }
        });

        // 当有文件添加进来的时候
        uploader.on('fileQueued', function (file) {
            var $li = $(
                    '<div id="' + file.id + '" class="cp_img">' +
                        '<img>' +
                        '<div class="cp_img_jian"></div>' +
                    '</div>'
                    ),
                $img = $li.find('img');

            $list.append($li);

            // 创建缩略图
            uploader.makeThumb(file, function (error, src) {
                if (error) {
                    $img.replaceWith('<span>不能预览</span>');
                    return;
                }

                $img.attr('src', src);
            }, thumbnailWidth, thumbnailHeight);
        });

        // 文件上传过程中创建进度条实时显示。
        uploader.on('uploadProgress', function (file, percentage) {
            var $li = $('#' + file.id),
                $percent = $li.find('.progress span');

            // 避免重复创建
            if (!$percent.length) {
                $percent = $('<p class="progress"><span></span></p>')
                        .appendTo($li)
                        .find('span');
            }

            $percent.css('width', percentage * 100 + '%');
        });

        // 文件上传成功，给item添加成功class, 用样式标记上传成功。
        uploader.on('uploadSuccess', function (file) {
            $('#' + file.id).addClass('upload-state-done');
            alert("发布借款成功成功");
            location.href = "/MemLoan/MemloanIng";
        });

        // 文件上传失败，现实上传出错。
        uploader.on('uploadError', function (file) {
            var $li = $('#' + file.id),
                $error = $li.find('div.error');

            // 避免重复创建
            if (!$error.length) {
                $error = $('<div class="error"></div>').appendTo($li);
            }

            $error.text('上传失败');
        });

        // 完成上传完了，成功或者失败，先删除进度条。
        uploader.on('uploadComplete', function (file) {
            $('#' + file.id).find('.progress').remove();
        });
        //所有文件上传完毕
        uploader.on("uploadFinished", function () {
            //提交表单

        });

        //开始上传
        $("#ctlBtn").click(function () {
            if ($("#Monwy").val() == "" || $("#LoanPurpose").val() == "" || $("#LoanRaise").val() == ""
                || $("#UserID").val() == "" || $("#Annualrate").val() == "" || $("#RepaymentModeId").val() == ""
                || $("#Title").val() == "" || $("#LoanExplain").val() == "" || $("#LoanTerm").val()==""
                ) {
                alert("请填写完整信息");
            } else {
                uploader.option('formData', {
                    Monwy: $("#Monwy").val(), //借款金额
                    LoanPurpose: $("#LoanPurpose").val(),//用途
                    LoanRaise: $("#LoanRaise").val(),// 筹集期
                    UserID: $("#UserID").val(), //用户
                    Annualrate: $("#Annualrate").val(),//利率
                    RepaymentModeId: $("#RepaymentModeId").val(), //还款方式
                    Title: $("#Title").val(),//标题
                    LoanExplain: $("#LoanExplain").val(),//借款说明
                    LoanTerm: $("#LoanTerm").val(), //借款期限
                    LoanType: $("#LoanType").val() //借款类型
                })
                uploader.upload();
            }
        });

        //显示删除按钮
        $(".cp_img").live("mouseover", function () {
            $(this).children(".cp_img_jian").css('display', 'block');

        });
        //隐藏删除按钮
        $(".cp_img").live("mouseout", function () {
            $(this).children(".cp_img_jian").css('display', 'none');

        });
        //执行删除方法
        $list.on("click", ".cp_img_jian", function () {
            var Id = $(this).parent().attr("id");
            uploader.removeFile(uploader.getFile(Id, true));
            $(this).parent().remove();
        });
    });
</script>